<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<style type="text/css">
body {
	background-color: #FFFFFF;
	font-family: Arial;
	padding: 32px;
	font-size: 14px;
}

a:link,a:visited {
	text-decoration: none
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none
}

.iconMenuCentro {
	padding: 0px 10px 0px 10px;
}

.txtQtda {
	font-weight: bold;
}

.separator {
	margin: 15px 5px 15px 5px;
	width: 90%;
}

.camposTexto {
	width: 500px;
}

.ui-widget-content {
	border: 0px !important;
}

.divCenario {
	border: 1px solid #C3D9FF;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.imgHelp {
	margin-left: 5px;
}

.labelTxt {
	
}

.editorHtml {
	
}

.linhaTabela {
	vertical-align: top;
}

.fieldset {
	border-style: solid;
	border-color: #CCCCCC;
}

.spanAssertEquals {
	background-color: #F0E68C;
}

.spanSet {
	background-color: #DEE4EA;
}

.spanExecute {
	background-color: #F7DED2;
}
</style>


	<script type="text/javascript">
	// <![CDATA[            

		var ULTIMO_TEXTAREA;
		$(function() {

			$('#txtDadoQue').blur(function() {
				ULTIMO_TEXTAREA = document.getElementById("txtDadoQue");
			});

			$('#txtQuando').blur(function() {
				ULTIMO_TEXTAREA = document.getElementById("txtQuando");
			});

			$('#txtEntao').blur(function() {
				ULTIMO_TEXTAREA = document.getElementById("txtEntao");
			});
		});

		function formatText(tagStart, tagEnd) {

			var el = ULTIMO_TEXTAREA;

			var selectedText = document.selection ? document.selection
					.createRange().text : el.value.substring(el.selectionStart,
					el.selectionEnd);// IE:Moz
			if (selectedText == "") {
				return false
			}
			var newText = tagStart + selectedText + tagEnd;
			if (document.selection) { //IE
				document.selection.createRange().text = newText;
			} else { //Moz
				el.value = el.value.substring(0, el.selectionStart) + newText
						+ el.value.substring(el.selectionEnd, el.value.length);
			}
		}

		function colorirTextos() {
			$('span[concordion\\:assertEquals]').addClass("spanAssertEquals");
			$('span[concordion\\:assertEquals]').attr("title", "AssertEquals");

			$('span[concordion\\:set]').addClass("spanSet");
			$('span[concordion\\:set]').attr("title", "Set");

			$('span[concordion\\:execute]').addClass("spanExecute");
			$('span[concordion\\:execute]').attr("title", "Execute");
		}

		function criarNomeClasseCenario() {
			var campoDescricao = $("#txtDescricao");
			if (campoDescricao.val() != "") {
				$("#txtNomeClasseCenario").val(
						converterNomeEmPadraoJava(campoDescricao.val()));
			}
		}

		function criarNomeClasse() {
			var campoNome = $("#txtNomeEstoria");
			if (campoNome.val() != "") {
				$("#txtNomeClasse").val(
						converterNomeEmPadraoJava(campoNome.val()));
			}
		}

		function setTipoComando(tipo) {
			$("#hdnTipoComando").val(tipo);
			dialogComando.show();
		}

		function inserirComando() {

			var tipoComando = $("#hdnTipoComando").val();

			var comando = $("#txtComando").val();

			if (tipoComando == 'assertEquals' || tipoComando == 'set'
					|| tipoComando == 'execute') {
				formatText(
						"<span concordion:"+ tipoComando +"='"+ comando +"'>",
						"</span>");
			}

			$("#txtComando").val("");
			dialogComando.hide();
		}

		function converterNomeEmPadraoJava(nomeSemPadrao) {

			if (nomeSemPadrao != "") {

				var nomeComPadrao = nomeSemPadrao;

				var diacritics = [ /[\300-\306]/g, /[\340-\346]/g, // A, a
				/[\310-\313]/g, /[\350-\353]/g, // E, e
				/[\314-\317]/g, /[\354-\357]/g, // I, i
				/[\322-\330]/g, /[\362-\370]/g, // O, o
				/[\331-\334]/g, /[\371-\374]/g, // U, u
				/[\321]/g, /[\361]/g, // N, n
				/[\307]/g, /[\347]/g, // C, c
				];

				var chars = [ 'A', 'a', 'E', 'e', 'I', 'i', 'O', 'o', 'U', 'u',
						'N', 'n', 'C', 'c' ];

				for ( var i = 0; i < diacritics.length; i++) {
					nomeComPadrao = nomeComPadrao.replace(diacritics[i],
							chars[i]);
				}

				nomeComPadrao = nomeComPadrao.toLowerCase().replace(/\b[a-z]/g,
						function(letter) {
							return letter.toUpperCase();
						});

				nomeComPadrao = nomeComPadrao.replace(/ /g, "");

				return nomeComPadrao;
			}
		}

		// ]]>
	</script>

</h:head>

<h:body>
	<h:form id="form1" prependId="false">
		<p:messages />

		<h:inputHidden id="hdnTipoComando" />

		<h1>Cadastro de estórias</h1>
		<p:separator style="height:2px;" />

		<h:panelGrid columns="2" rowClasses="linhaTabela" cellspacing="5">
			<h:outputLabel for="txtNomeEstoria" value="Nome:"
				styleClass="labelTxt" />
			<h:panelGroup>
				<p:inputText id="txtNomeEstoria" label="Nome"
					onblur="criarNomeClasse();" value="#{manterEstoria.estoria.nome}"
					styleClass="camposTexto" maxlength="200" />
				<p:graphicImage url="/imgs/help.png" styleClass="imgHelp"
					title="Informe o nome que a estória deve ter. Ex: Manter Quesitos de Impacto da Ameaça" />
			</h:panelGroup>

			<h:outputLabel for="txtDescEstoria" value="Descrição:"
				styleClass="labelTxt" />

			<h:panelGroup layout="block">
				<p:editor controls="bold italic underline" id="txtDescEstoria"
					value="#{manterEstoria.estoria.descricao}" label="Descrição"
					styleClass="editorHtml" height="100" width="505" />

			</h:panelGroup>

			<h:outputLabel for="txtDefEstoria" value="Definições:"
				styleClass="labelTxt" />

			<h:panelGroup layout="block">
				<p:editor controls="bold italic underline" id="txtDefEstoria"
					value="#{manterEstoria.estoria.definicoes}" label="Definições"
					styleClass="editorHtml" height="100" width="505" />

			</h:panelGroup>

		</h:panelGrid>


		<fieldset class="fieldset">
			<legend>Regras</legend>
			<h:outputLabel for="txtDescRegra" value="Descrição:" />
			<p:inputText id="txtDescRegra" maxlength="100" label="Descrição"
				value="#{manterEstoria.regra.descricao}" style="width:400px;" />

			<p:graphicImage url="/imgs/help.png" styleClass="imgHelp"
				title="TODO verificar" />

			<p:commandButton id="btnAddRegra" process="@this txtDescRegra"
				update="listRegras txtDescRegra :formCenario:cmbRegras" icon="ui-icon-plus"
				style="height:20px; width:20px; position:relative;top:10px; left:15px;"
				action="#{manterEstoria.adicionarRegra}" />

			<br />
			<p:dataList id="listRegras" type="none"
				value="#{manterEstoria.estoria.listaRegras}" var="regra">
				<div>
					<a name="#{regra.codigo}"><h:outputText
							value="#{regra.codigo} - #{regra.descricao}" /></a>
				</div>
			</p:dataList>
		</fieldset>

		<h2>
			Cenários
			<p:commandButton icon="ui-icon-plus" alt="Adicionar cenário."
				style="height:20px; width:20px; position:relative;top:20px;"
				onclick="dialogCenario.show()" ajax="false" />
		</h2>

		<p:separator style="height:1px;" />

		<p:dataList id="listCenarios" type="none" style="margin-top:10px;"
			value="#{manterEstoria.estoria.listaCenarios}" var="cenario">

			<div class="example pass divCenario">

				<h3>
					<h:outputText
						value="Cenário #{cenario.codigo}: #{cenario.descricao}" />
				</h3>

				<p:outputPanel layout="block">
					<a href="#RN3">Links</a>
				</p:outputPanel>

				<p:outputPanel layout="block">
					<h:outputText value="Dado que "
						style="font-weight:bold; font-style:italic;" />
					<h:outputText value="#{cenario.dadoQue}" escape="false" />
				</p:outputPanel>

				<p:outputPanel layout="block">
					<h:outputText value="Quando "
						style="font-weight:bold; font-style:italic;" />
					<h:outputText value="#{cenario.quando}" escape="false" />
				</p:outputPanel>

				<p:outputPanel layout="block">
					<h:outputText value="Então "
						style="font-weight:bold; font-style:italic;" />
					<h:outputText value="#{cenario.entao}" escape="false" />
				</p:outputPanel>

			</div>

		</p:dataList>


		<fieldset class="fieldset">
			<legend>Configurações</legend>
			<h:panelGrid columns="2">
				<h:outputLabel for="txtNomeClasse" value="Nome da Classe:" />

				<p:inputText value="#{manterEstoria.estoria.nomeArquivo}"
					id="txtNomeClasse" maxlength="50" label="Classe Gerada:"
					styleClass="camposTexto" />


				<h:outputLabel for="txtPacote" value="Pacote:" />

				<p:inputText value="#{manterEstoria.estoria.nomePacote}"
					id="txtPacote" maxlength="50" label="Pacote"
					styleClass="camposTexto" />

			</h:panelGrid>
		</fieldset>

		<p:commandButton value="Gerar" action="#{manterEstoria.gerarArquivo}"
			ajax="false" process="@form" />

	</h:form>

	<p:dialog widgetVar="dialogCenario" id="dialogCenario" modal="true"
		resizable="false" draggable="false" header="Adicionar cenário">

		<h:form id="formCenario" prependId="false">

			<p:contextMenu for="panelCenario">

				<p:menuitem value="assertEquals"
					onclick="setTipoComando('assertEquals')" />
				<p:menuitem value="set" onclick="setTipoComando('set')" />
				<p:menuitem value="execute" onclick="setTipoComando('execute')" />
				<p:menuitem value="verifyRows" />

			</p:contextMenu>

			<h:panelGrid columns="2" id="panelCenario">

				<h:outputLabel for="txtReferencia" value="Referências:" />
				<h:panelGroup>
					<p:selectOneMenu id="cmbRegras" >
						<f:selectItems value="#{manterEstoria.listaRegrasSelect}" />
					</p:selectOneMenu>

					<p:commandButton id="btnAddRef" process="@this cmbRegras"
						update="referencias" icon="ui-icon-plus"
						style="height:20px; width:20px; position:relative;top:10px; left:15px;"
						action="#{manterEstoria.adicionarReferencia}" />

						<h:outputText id="referencias" value="#{manterEstoria.referencias}" />
				</h:panelGroup>

				<h:outputLabel for="txtDescricao" value="Descrição:" />
				<p:inputText id="txtDescricao" maxlength="100" style="width:380px;"
					value="#{manterEstoria.cenario.descricao}"
					onblur="criarNomeClasseCenario();" />

				<h:outputLabel for="txtNomeClasseCenario" value="Classe Gerada:" />
				<p:inputText id="txtNomeClasseCenario" maxlength="100"
					style="width:380px;" value="#{manterEstoria.cenario.nomeClasse}" />

				<h:outputLabel for="txtDadoQue" value="Dado que" />
				<p:inputTextarea id="txtDadoQue" maxlength="100" cols="50" rows="2"
					autoResize="false" value="#{manterEstoria.cenario.dadoQue}" />

				<h:outputLabel for="txtQuando" value="Quando" />
				<p:inputTextarea id="txtQuando" maxlength="100" cols="50" rows="2"
					autoResize="false" value="#{manterEstoria.cenario.quando}" />

				<h:outputLabel for="txtEntao" value="Então" />
				<p:inputTextarea id="txtEntao" maxlength="100" cols="50" rows="2"
					autoResize="false" value="#{manterEstoria.cenario.entao}" />
			</h:panelGrid>


			<div>
				<p:commandButton id="btnAddCenario" process="@form"
					update=":form1:listCenarios @form" value="Add"
					onsuccess="dialogCenario.hide()" oncomplete="colorirTextos();"
					action="#{manterEstoria.adicionarCenario}" />

				<p:commandButton value="Cancelar" type="button"
					onclick="dialogCenario.hide()" />
			</div>
		</h:form>
	</p:dialog>

	<p:dialog widgetVar="dialogComando" id="dialogComando" modal="true"
		resizable="false" draggable="false"
		header="Adicionar comando \'$('#hdnTipoComando').val()\'">

		<h:form id="formComando" prependId="false">

			<h:panelGrid columns="2" id="panelComando">

				<h:outputLabel for="txtComando" value="Nome:" />
				<p:inputText id="txtComando" maxlength="100" style="width:150px;" />

			</h:panelGrid>

			<div>
				<p:commandButton id="btnAddComando" value="Add"
					onclick="inserirComando();" type="button" />

				<p:commandButton value="Cancelar" type="button"
					onclick="dialogComando.hide()" />
			</div>

		</h:form>
	</p:dialog>

</h:body>
</html>